<template>
  <div>
    <div class="container">
      <el-form ref="form" :rules="rulesInfo" :model="formData" label-width="80px">
        <el-form-item label="工号" prop="id">
          <el-input v-model.number="formData.id" size="small" placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" size="small" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="formData.role" @change="changeRole" clearable placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-select
            v-model="formData.level"
            :disabled="inpDisabled.level"
            clearable
            placeholder="请选择">
            <el-option
              v-for="item in levelData"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称" prop="profession">
          <el-select
            v-model="formData.profession"
            @change="changeWork('职称')"
            @clear="clearWork()"
            :disabled="inpDisabled.profession"
            clearable
            placeholder="请选择">
            <el-option
              v-for="item in professionData"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作年限" prop="workYear">
          <el-input
            v-model.number="formData.workYear"
            size="small"
            :disabled="inpDisabled.workYear"
            placeholder="请输入工作年限"></el-input>
        </el-form-item>
        <el-form-item label="管理员职务" prop="managerPro">
          <el-select
            v-model="formData.managerPro"
            @change="changeWork('管理员职务')"
            @clear="clearWork()"
            :disabled="inpDisabled.managerPro"
            clearable
            placeholder="请选择">
            <el-option
              v-for="item in managerProData"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员年限" prop="managerYear">
          <el-input
            v-model.number="formData.managerYear"
            size="small"
            :disabled="inpDisabled.managerYear"
            placeholder="请输入管理员年限"></el-input>
        </el-form-item>
        <el-form-item label="课时" prop="classHour">
          <el-input v-model="formData.classHour" size="small" placeholder="请输入课时"></el-input>
        </el-form-item>
        <el-form-item label="科研学时" prop="sciHour">
          <el-input v-model="formData.sciHour" size="small" placeholder="请输入科研学时"></el-input>
        </el-form-item>
        <el-form-item label="公共服务" prop="publicService">
          <el-input
            v-model="formData.publicService"
            size="small"
            placeholder="请输入公共服务"></el-input>
        </el-form-item>
        <el-form-item label="其他绩效" prop="otherSalary">
          <el-input
            v-model="formData.otherSalary"
            size="small"
            placeholder="请输入其他绩效"></el-input>
        </el-form-item>
        <el-form-item label="是否临近退休" prop="isRetirement">
          <el-input
            v-model="formData.isRetirement"
            size="small"
            placeholder="请输入是否临近退休"></el-input>
        </el-form-item>
        <el-form-item label="是否评优" prop="isGood">
          <el-input v-model="formData.isGood" size="small" placeholder="请输入是否评优"></el-input>
        </el-form-item>
        <el-form-item label="是否合格" prop="isFit">
          <el-input v-model="formData.isFit" size="small" placeholder="请输入是否合格"></el-input>
        </el-form-item>
        <el-form-item label="评价分数">
          <el-input v-model="formData.esScore" size="small" placeholder="请输入评价分数"></el-input>
        </el-form-item>
        <el-form-item label="有效时长">
          <el-input
            v-model="formData.effectiveTime"
            size="small"
            placeholder="请输入有效时长"></el-input>
        </el-form-item>
        <el-form-item label="超出工作学时">
          <el-input
            v-model="formData.overHour"
            size="small"
            placeholder="请输入超出工作学时"></el-input>
        </el-form-item>
        <el-form-item label="绩效分">
          <el-input v-model="formData.score" size="small" placeholder="请输入绩效分"></el-input>
        </el-form-item>
        <el-form-item label="奖金">
          <el-input v-model="formData.bonus" size="small" placeholder="请输入奖金"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="onSubmit">{{
          this.title == "添加" ? "立即创建" : "确认修改"
        }}</el-button>
        <el-button @click="$router.push('/')">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { mapState } from "vuex";
import { showMessage } from "@/utils/common";
export default {
  data() {
    return {
      formData: {
        id: "",
        name: "",
        role: "",
        level: "",
        profession: "",
        workYear: "",
        managerPro: "",
        managerYear: "",
        classHour: "",
        sciHour: "",
        publicService: "",
        otherSalary: "",
        isRetirement: "",
        isGood: "",
        isFit: "",
        esScore: "",
        effectiveTime: "",
        overHour: "",
        score: "",
        bonus: "",
      },
      roleData: [
        { value: "教师岗" },
        { value: "实验岗" },
        { value: "工勤岗" },
        { value: "管理岗" },
        { value: "双肩挑" },
        { value: "非学院双肩挑" },
      ],
      inpDisabled: {
        level: true,
        profession: true,
        workYear: true,
        managerPro: true,
        managerYear: true,
      },
      teacherLevelData: [
        { value: "二级" },
        { value: "三级" },
        { value: "四级" },
        { value: "五级" },
        { value: "六级" },
        { value: "七级" },
        { value: "八级" },
        { value: "九级" },
        { value: "十级" },
        { value: "十一级" },
        { value: "十二级" },
        { value: "见习" },
      ],
      labTeacherData: [
        { value: "四级" },
        { value: "五级" },
        { value: "六级" },
        { value: "七级" },
        { value: "八级" },
        { value: "九级" },
        { value: "十级" },
        { value: "十一级" },
      ],
      teacherProfessionData: [
        { value: "正高二级" },
        { value: "正高三级" },
        { value: "正高四级" },
        { value: "副高五级" },
        { value: "副高六级" },
        { value: "副高七级" },
        { value: "中级八级" },
        { value: "中级九级" },
        { value: "中级十级" },
        { value: "初级十一级" },
        { value: "初级十二级" },
        { value: "新进博士" },
        { value: "新进硕士" },
        { value: "见习" },
      ],
      labProfessionData: [
        { value: "正高级" },
        { value: "副高级" },
        { value: "中级" },
        { value: "助理级" },
        { value: "员级" },
        { value: "见习" },
      ],
      ManagerProData: [
        { value: "正校级" },
        { value: "副校级" },
        { value: "正处级" },
        { value: "副处级" },
        { value: "正科级" },
        { value: "副科级" },
        { value: "科员" },
        { value: "办事员" },
        { value: "见习" },
      ],
      workManagerProData: [
        { value: "技师" },
        { value: "高级工" },
        { value: "中级工" },
        { value: "初级工" },
        { value: "普工" },
      ],
      rules: {
        id: [{ required: true, message: "请输入工号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
    };
  },
  computed: {
    ...mapState("addTeacher", ["title", "FormData"]),
    rulesInfo() {
      let info = { ...this.rules };
      let level = [{ required: true, message: "请选择等级", trigger: "change" }];
      let workYear = [{ required: true, message: "请输入工作年限", trigger: "blur" }];
      let profession = [{ required: true, message: "请选择职称", trigger: "change" }];
      let managerPro = [{ required: true, message: "请选择管理员职务", trigger: "change" }];
      let managerYear = [{ required: true, message: "请输入管理员年限", trigger: "blur" }];
      if (this.formData.role === "教师岗" || this.formData.role === "实验岗") {
        info.level = level;
        info.workYear = workYear;
        info.profession = profession;
      } else if (this.formData.role === "双肩挑" || this.formData.role === "非学院双肩挑") {
        info.level = level;
        info.workYear = workYear;
        info.profession = profession;
        info.managerPro = managerPro;
        info.managerYear = managerYear;
      } else if (this.formData.role === "管理岗") {
        info.managerPro = managerPro;
        info.managerYear = managerYear;
      } else if (this.formData.role === "工勤岗") {
        if (!this.formData.profession && !this.formData.managerPro) {
          info.profession = profession;
          info.managerPro = managerPro;
        }
        if (this.formData.profession) {
          info.level = level;
          info.workYear = workYear;
        } else if (this.formData.managerPro) {
          info.managerPro = managerPro;
          info.managerYear = managerYear;
        }
      }
      return info;
    },
    levelData() {
      if (
        this.formData.role === "教师岗" ||
        this.formData.role === "非学院双肩挑" ||
        this.formData.role === "双肩挑" ||
        (this.formData.role === "工勤岗" && this.formData.profession)
      )
        return this.teacherLevelData;
      else if (this.formData.role === "实验岗") return this.labTeacherData;
      return [];
    },
    professionData() {
      if (
        this.formData.role === "教师岗" ||
        this.formData.role === "非学院双肩挑" ||
        this.formData.role === "双肩挑"
      )
        return this.teacherProfessionData;
      else if (this.formData.role === "实验岗") return this.labProfessionData;
      else if (this.formData.role === "工勤岗") return this.workManagerProData;
      return [];
    },
    managerProData() {
      if (
        this.formData.role === "教师岗" ||
        this.formData.role === "管理岗" ||
        this.formData.role === "双肩挑" ||
        this.formData.role === "非学院双肩挑"
      )
        return this.ManagerProData;
      else if (this.formData.role === "工勤岗") return this.workManagerProData;
      return [];
    },
  },
  methods: {
    async onSubmit() {
      console.log(this.formData);
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const apiMethod = this.title === "添加" ? this.$api.addTeacher : this.$api.changeTeacher;
          const res = await apiMethod(this.formData);
          console.log(res);
          showMessage(res, this);
          router.push("/");
        } else {
          return false;
        }
      });
    },
    changeRole(val) {
      for (let item in this.inpDisabled) {
        this.inpDisabled[item] = true;
      }
      this.formData.level = "";
      this.formData.workYear = "";
      this.formData.profession = "";
      this.formData.managerPro = "";
      this.formData.managerYear = "";
      let arr = ["level", "workYear", "profession", "managerPro", "managerYear"];
      arr.forEach((item) => {
        this.$refs.form.validateField(item, (valid) => {
          if (valid) {
            console.log(item + "验证通过");
            this.$nextTick(() => {
              this.$refs.form.clearValidate(item);
            });
          }
        });
      });
      if (val === "教师岗" || val === "实验岗") {
        this.inpDisabled.level = false;
        this.inpDisabled.workYear = false;
        this.inpDisabled.profession = false;
      } else if (val === "双肩挑" || val === "非学院双肩挑") {
        this.inpDisabled.level = false;
        this.inpDisabled.workYear = false;
        this.inpDisabled.profession = false;
        this.inpDisabled.managerPro = false;
        this.inpDisabled.managerYear = false;
      } else if (val === "管理岗") {
        this.inpDisabled.managerPro = false;
        this.inpDisabled.managerYear = false;
      } else if (val === "工勤岗") {
        this.inpDisabled.profession = false;
        this.inpDisabled.managerPro = false;
      }
    },
    changeWork(val) {
      if (this.formData.role != "工勤岗") return;
      for (let item in this.inpDisabled) {
        this.inpDisabled[item] = true;
      }
      if (val === "职称") {
        this.inpDisabled.profession = false;
        this.inpDisabled.level = false;
        this.inpDisabled.workYear = false;
      } else if (val === "管理员职务") {
        this.inpDisabled.managerPro = false;
        this.inpDisabled.managerYear = false;
      }
      let arr = ["profession", "managerPro"];
      arr.forEach((item) => {
        this.$refs.form.validateField(item, (valid) => {
          if (valid) {
            console.log(item + "验证通过");
            this.$nextTick(() => {
              this.$refs.form.clearValidate(item);
            });
          }
        });
      });
    },
    clearWork() {
      for (let item in this.inpDisabled) {
        this.inpDisabled[item] = true;
      }
      this.inpDisabled.profession = false;
      this.inpDisabled.managerPro = false;
      this.formData.level = "";
      this.formData.workYear = "";
      this.formData.profession = "";
      this.formData.managerPro = "";
      this.formData.managerYear = "";
      let arr = ["level", "workYear", "profession", "managerPro", "managerYear"];
      arr.forEach((item) => {
        this.$refs.form.validateField(item, (valid) => {
          if (valid) {
            console.log(item + "验证通过");
            this.$nextTick(() => {
              this.$refs.form.clearValidate(item);
            });
          }
        });
      });
    },
  },
  mounted() {
    if (this.title === "编辑") this.formData = this.FormData;
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 94%;
  height: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;

  /deep/ .el-form {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
  }

  /deep/ .el-form-item__content {
    display: flex;
  }

  /deep/ .el-input__inner {
    width: 29vw;
  }

  /deep/ .el-form-item__label {
    width: 100px !important;
    text-align: center;
  }
  .btn {
    display: flex;
    justify-content: center;
    width: 500px;
    margin: 20px auto;
  }
}
</style>
